<template>
  <div>
    <return-page />
    <div id="knowledge_detail" class="mt10">
      <el-descriptions column="2" :contentStyle="{ 'font-weight': 'bold' }">
        <el-descriptions-item
          span="2"
          label="知识库名称"
          :contentStyle="{ 'padding-bottom': '20px' }"
          >{{ KnowledgeDetail.knowledgeName }}</el-descriptions-item
        >
        <el-descriptions-item label="问题名称">{{
          KnowledgeDetail.questionName
        }}</el-descriptions-item>
        <el-descriptions-item label="解决方法">{{
          KnowledgeDetail.questionSolution
        }}</el-descriptions-item>
        <el-descriptions-item label="问题内容">
          {{ KnowledgeDetail.questionDes }}
        </el-descriptions-item>
        <el-descriptions-item label="解决方法附件">{{
          KnowledgeDetail.questionSolutionAttachment | getFileName
        }}</el-descriptions-item>
        <el-descriptions-item label="问题附件">{{
          KnowledgeDetail.questionAttachment | getFileName
        }}</el-descriptions-item>

        <el-descriptions-item label="来源">{{
          KnowledgeDetail.sourceType + " 转成 " + KnowledgeDetail.knowledgeName
        }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        column="2"
        :contentStyle="{ color: '#409eff', cursor: 'pointer' }"
        class="mt20"
      >
        <el-descriptions-item label="知识库归档流程"
          ><span
            @click="handleFlowRecord(KnowledgeDetail.knowledgeProcessId)"
            >{{ KnowledgeDetail.knowledgeProcessName }}</span
          ></el-descriptions-item
        >
        <el-descriptions-item label="来源问题流程">
          <span @click="handleFlowRecord(KnowledgeDetail.sourceId)">{{
            KnowledgeDetail.sourceProcessName
          }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import ReturnPage from "../../../components/ReturnPage.vue";
import { getKnowledgeDetail_Api } from "@/api/centralized/serviceCounter";
export default {
  components: { ReturnPage },
  data() {
    return {
      KnowledgeDetail: {},
    };
  },
  methods: {
    /** 流程流转记录 */
    handleFlowRecord(procInsId) {
      console.log(procInsId);
      this.$router.push({
        path: "/workflow/process/detail/" + procInsId,
        query: {
          processed: false,
        },
      });
    },
    getKnowledgeDetail() {
      getKnowledgeDetail_Api(this.$route.query.id).then((res) => {
        this.KnowledgeDetail = res.data;
      });
    },
  },
  created() {
    this.getKnowledgeDetail();
  },
  filters: {
    //截取文件名
    getFileName(val) {
      if (!val) return "";
      const arr = val.split("/");
      return arr[arr.length - 1];
    },
  },
};
</script>

<style lang="scss" scoped>
#knowledge_detail {
  background-color: #ffffff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100vh - 160px);
}
</style>